<!DOCTYPE html>
<html lang="en">

<head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Welcome to my website</title>
        <style>
                #contater {
                        background-color: #666;
                }

                #top {
                        position: fixed;
                        top: 0px;
                        left: 0px;
                        right: 0px;
                        bottom: 0px;
                        height: 110px;
                        background-color: blue;
                }


                #left {
                        position: fixed;
                        top: 111px;
                        left: 0px;
                        right: 0px;
                        bottom: 40px;
                        width: 150px;
                        background-color: #0cf12b;
                }

                #right {
                        position: fixed;
                        top: 111px;
                        left: 150px;
                        right: 0px;
                        bottom: 0px;
                        background-color: rebeccapurple;
                }

                #bottom {
                        position: fixed;
                        /* top: 0px; */
                        left: 0px;
                        right: 0px;
                        bottom: 0px;
                        height: 40px;
                        background-color: pink;
                }
        </style>
</head>

<body>
        <div id="contater">

                <div id="top">顶部</div>

                <div id="left">中左</div>

                <div id="right">中右</div>

                <div id="bottom">底部</div>
        </div>
</body>

</html>